import { useEffect, useRef } from "react"
import MicroAppCore from "../../core/MicroApp"
import jsLoader from "../../utils/jsLoader"
// import ReactDOM from './react-dom.production.min'
export const activeRule = (item: any, basename) => {

  return item.version && item.path === location.pathname
}
// const App = () => {
//   return <div>
//     <MicroAppCore react={} entry="react17.js" onLoad={undefined} onError={undefined} />
//   </div>
// }

class ReactApp extends HTMLElement {
  constructor() {
    super()
    let iRoot = this.attachShadow({ mode: 'open' })

    const react = 'react-dom-v17'// this.getAttribute('react')
    // let div = document.createElement('div')
    if (react) {

      jsLoader(['react-v17', 'react-dom-v17']).then((res: any) => {
        const [React, ReactDOM] = res
        //    @ts-ignore
        ReactDOM.render(<MicroAppCore entry="a.react17.js" React={React} />, iRoot)
      })
    }

  }
}
customElements.define('react-app', ReactApp)

export const MicroApp = ({ onLoad, react, entry }) => {
  const el = useRef(null)
  // const { jsLoader } = useLoader()
  // if (!react) {
  //   return null
  // }
  
  useEffect(()=>{
    debugger
    jsLoader(['react-v17', 'react-dom-v17']).then((res: any) => {
      const [React, ReactDOM] = res
      //    @ts-ignore
      ReactDOM.render(<MicroAppCore entry="a.react17.js" React={React} />, el.current)
    })
    // ReactDOM.render(<MicroAppCore entry="a.react17.js" React={React} />, iRoot)
  },[])
  return <div ref={el} />
  //    @ts-ignore
  // return <react-app react={react}></react-app>
}
export default {
  activeRule,
  MicroApp,

}